<template>
  <div class="shopCar-container">
    <div class="goods-list">
      <div class="mui-card" v-for="(item,i) in goodslist " :key="item.id">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
              <mt-switch 
              v-model="$store.getters.getGoodsSelected[item.id]" 
              @change="selectedChange(item.id,$store.getters.getGoodsSelected[item.id])"
              ></mt-switch>
              <img :src="item.thumb_path" alt="">
              <div class="info">
                  <h3>{{item.title}}</h3>
                  <p>
                      <span class='price'>￥{{item.sell_price}} 
                          <numBox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numBox> </span>



                      <a href="#" @click.prevent="remove(item.id,i)">删除  </a>
                  </p>
              </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner js"  >
            <div class="left">
                <p>总计(不含运费)</p>
                <P>已经勾选商品 <span class='red'>{{$store.getters.getGoodsCountAndAmount.count}}</span> 件,总价<span class='red'>{{$store.getters.getGoodsCountAndAmount.amount}}</span>元</P>
            </div>
            <mt-button type='danger'> 去结算</mt-button>
        </div>
      </div>
    </div>
    <p> {{ $store.getters.getGoodsSelected}}</p>
  </div>
</template>

<script>
import numBox from '../suncomponents/shopCarnumber.vue'
export default{
    data(){
        return {
            goodslist:[]
        }
    },
    created(){
        this.getShopList()
    },
    methods:{
       
        getShopList(){
                var idArr=[];
                this.$store.state.car.forEach(item=>idArr.push(item.id));
                if(idArr.length <=0){
                    return
                }
            this.$http.get('api/goods/getshopcarlist/'+idArr.join(",")).then(result=>{
                if(result.body.status==0){
                    this.goodslist=result.body.message
                }
            })
        },
        remove(id,index){
            this.goodslist.splice(index,1),
            this.$store.commit('removeFormCar',id)
        },
        selectedChange(id,val){
            //点击开关 同步到store
            console.log(id+"```"+val)
            this.$store.commit('updateGoodsSeclected',{id,selected:val})
        }


    },
    components:{
        numBox
    }
}
</script>

<style lang='scss' scoped>
.shopCar-container{
    background-color: #eee;
    overflow: hidden;
    .goods-list{
        .mui-card-content-inner{
            display: flex;
            align-items: center;
        }
      img{
          height: 60px;
          width: 60px;
      }
      h3{
          font-size: 13px;
      }
      .info{
          .price{
              color:red;
              font-weight: 700;
          }
      }
    }
    .js{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .red{
        color:red;
        font-weight: 700;
    }
}

</style>